<template>
    <view :style="themeColor">
        <view class="page" >
    <view class="flex align-stretch benben-position-layout flex mapSearchresults_flex_0"    :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
            <view   class='flex align-center justify-between flex-sub mapSearchresults_fd0_0'      >
            <view   class='flex align-center mapSearchresults_fd0_0_c0'   @tap.stop="handleJumpDiy" data-type="back" data-url="1"   >
        <text class='fu-iconfont2  mapSearchresults_fd0_0_c0_c0'  >&#xE794;</text>
</view>
    <view   class='flex align-center flex-sub mapSearchresults_fd0_0_c1'      >
        <text class='fu-iconfont2  mapSearchresults_fd0_0_c1_c0'  >&#xe77e;</text>
<input class='flex-sub mapSearchresults_fd0_0_c1_c1'   type="text" :placeholder="$t('搜索小区或商圈')" confirm-type="done" :maxlength="-1" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"  v-model="keyworld" />
<image class='mapSearchresults_fd0_0_c1_c2'  mode="aspectFit"  :src='STATIC_URL+"35.png"' @tap.stop="clearnInputFunc()" v-if= " keyworld!=''"></image>
</view>
</view>

        </view>
<view :style="{height: (88+StatusBarRpx)+'rpx'}"  ></view>
    <view class="flex flex-direction flex-wrap align-stretch justify-end benben-position-layout flex mapSearchresults_flex_1"    :style="{top:(88+StatusBarRpx)+'rpx', }">
            <view   class='flex flex-wrap align-center mapSearchresults_fd1_0'      >
        <text class='mapSearchresults_fd1_0_c0'  >永乐东区（4套）</text>
</view>
<view>
        <benben-flex-tabs class-name='mapSearchresults_benbenTabsfd1_1'  v-model="tabls" ref="benben_tabsfd1_1" select-mark="benben_tabsfd1_1" key="benben_tabsfd1_1" :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false'  :tabs-info.sync="tabsInfofd1_1"  >

                    <scroll-view
          @scroll="tabsInfofd1_1.scrollX = $event.detail.scrollLeft"
          id="benben_tabsfd1_1"
          class="benben-tabs"
          style="width:750rpx"
          :scroll-x="true"
          :scroll-left.sync="tabsInfofd1_1.moveX"
          scroll-with-animation="all .3s ease"
        >
          <view class="benben-tabs-content" id="benben_tabsfd1_1-content">
            <view id="benben_tabsfd1_1-title" class="benben-tabs-title flex align-center flex ">
                        <view
                :class="{ 'checkTitlefd1_1': tabls == '1', 'flex flex-wrap align-center mapSearchresults_titlefd1_1_c3': true }"
                @tap="tabls = '1'"
                :id="`benben_tabsfd1_1-title-item-${'1'}`"


              >

<text class='mapSearchresults_titleItemfd1_1_c3_c0'  >个人房源</text>

              </view>            <view
                :class="{ 'checkTitlefd1_1': tabls == '2', 'flex flex-wrap align-center mapSearchresults_titlefd1_1_c3': true }"
                @tap="tabls = '2'"
                :id="`benben_tabsfd1_1-title-item-${'2'}`"


              >

<text class='mapSearchresults_titleItemfd1_1_c3_c0'  >中介房源</text>

              </view>            <view
                :class="{ 'checkTitlefd1_1': tabls == '3', 'flex flex-wrap align-center mapSearchresults_titlefd1_1_c3': true }"
                @tap="tabls = '3'"
                :id="`benben_tabsfd1_1-title-item-${'3'}`"


              >

<text class='mapSearchresults_titleItemfd1_1_c3_c0'  >品牌公寓</text>

              </view>
            </view>
            <view :style="{ left: tabsInfofd1_1.lineleft, maxWidth: tabsInfofd1_1.lineWidth ,}" id="benben_tabsfd1_1-line" class="benben-tabs-line flex benben-flex-tabs-line mapSearchresults_linefd1_1"></view>
          </view>
        </scroll-view>

        </benben-flex-tabs>

</view>

        </view>
<view :style="{height: '170rpx'}"  ></view>
<!---flex布局flex布局开始-->
 <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout mapSearchresults_flex_2"   v-if= " in_array(tabls,'1,2')" >
            <view   class='flex flex-wrap align-center mapSearchresults_fd2_0'      >
            <view   class='flex flex-direction flex-wrap align-start mapSearchresults_fd2_0_c0'      >
        <image class='mapSearchresults_fd2_0_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"31.png"'></image>
<text class='mapSearchresults_fd2_0_c0_c1'  >整租</text>
</view>
    <view   class='flex flex-direction flex-wrap align-start flex-sub'      >
            <view   class='flex flex-wrap align-center'      >
        <text class='mapSearchresults_fd2_0_c1_c0_c0'  >双地铁衡山路 南北通透，周边学校</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0_c1_c1'      >
        <text class='mapSearchresults_fd2_0_c1_c1_c0'  >别墅</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0_c1_c1'      >
        <image class='mapSearchresults_fd2_0_c1_c2_c0'  mode="aspectFit"  :src='STATIC_URL+"32.png"'></image>
<text class='mapSearchresults_fd2_0_c1_c2_c1'  >九龙-长沙湾/深水埗/荔枝角</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0_c1_c3'      >
        <text class='mapSearchresults_fd2_0_c1_c3_c0'  >HK$</text>
<text class='mapSearchresults_fd2_0_c1_c3_c1'  >8000</text>
<text class='mapSearchresults_fd2_0_c1_c3_c0'  >/月</text>
</view>
</view>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0'      >
            <view   class='flex flex-direction flex-wrap align-start mapSearchresults_fd2_0_c0'      >
        <image class='mapSearchresults_fd2_0_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"31.png"'></image>
<text class='mapSearchresults_fd2_1_c0_c1'  >合租</text>
</view>
    <view   class='flex flex-direction flex-wrap align-start flex-sub'      >
            <view   class='flex flex-wrap align-center'      >
        <text class='mapSearchresults_fd2_0_c1_c0_c0'  >双地铁衡山路 南北通透，周边学校</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0_c1_c1'      >
        <text class='mapSearchresults_fd2_0_c1_c1_c0'  >别墅</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0_c1_c1'      >
        <image class='mapSearchresults_fd2_0_c1_c2_c0'  mode="aspectFit"  :src='STATIC_URL+"32.png"'></image>
<text class='mapSearchresults_fd2_0_c1_c2_c1'  >九龙-长沙湾/深水埗/荔枝角</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd2_0_c1_c3'      >
        <text class='mapSearchresults_fd2_0_c1_c3_c0'  >HK$</text>
<text class='mapSearchresults_fd2_0_c1_c3_c1'  >8000</text>
<text class='mapSearchresults_fd2_0_c1_c3_c0'  >/月</text>
</view>
</view>
</view>
</view>

<!---flex布局flex布局结束-->
<!---flex布局flex布局开始-->
 <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout mapSearchresults_flex_3"   v-if= " tabls=='3'" >
            <view   class='flex flex-wrap align-center mapSearchresults_fd3_0'      >
            <view   class='flex flex-direction flex-wrap align-start mapSearchresults_fd3_0_c0'      >
        <image class='mapSearchresults_fd3_0_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"31.png"'></image>
</view>
    <view   class='flex flex-direction flex-wrap align-stretch flex-sub'      >
            <view   class='flex flex-wrap align-center'      >
        <text class='mapSearchresults_fd3_0_c1_c0_c0'  >汉庭酒店</text>
<text class='mapSearchresults_fd3_0_c1_c0_c1'  >双地铁衡山路 南北通透，周边学校</text>
</view>
    <view   class='flex flex-wrap align-center mapSearchresults_fd3_0_c1_c1'      >
        <image class='mapSearchresults_fd3_0_c1_c1_c0'  mode="aspectFit"  :src='STATIC_URL+"32.png"'></image>
<text class='mapSearchresults_fd3_0_c1_c1_c1'  >九龙-长沙湾/深水埗/荔枝角</text>
</view>
    <view   class='flex flex-direction flex-wrap align-stretch mapSearchresults_fd3_0_c1_c2'      >
            <view   class='flex flex-wrap align-center justify-between'      >
        <text class='mapSearchresults_fd3_0_c1_c2_c0_c0'  >海景套单人间</text>
    <view   class='flex flex-wrap align-center'      >
        <text class='mapSearchresults_fd3_0_c1_c2_c0_c1_c0'  >HK$</text>
<text class='mapSearchresults_fd3_0_c1_c2_c0_c1_c1'  >8000</text>
<text class='mapSearchresults_fd3_0_c1_c2_c0_c1_c0'  >/月</text>
</view>
</view>
    <view   class='flex flex-wrap align-center justify-between mapSearchresults_fd3_0_c1_c2_c1'      >
        <text class='mapSearchresults_fd3_0_c1_c2_c0_c0'  >高级双人间</text>
    <view   class='flex flex-wrap align-center'      >
        <text class='mapSearchresults_fd3_0_c1_c2_c0_c1_c0'  >HK$</text>
<text class='mapSearchresults_fd3_0_c1_c2_c0_c1_c1'  >8000</text>
<text class='mapSearchresults_fd3_0_c1_c2_c0_c1_c0'  >/月</text>
</view>
</view>
</view>
</view>
</view>
</view>

<!---flex布局flex布局结束-->


        </view>
    </view>
</template>
<script>

    export default {
        components:{},


        data(){
			return {"tabsInfofd1_1":{ lineleft: '', lineWidth: '', moveX: 0, scrollX: 0, PageScrollX: 0 },"tabls":"1","keyworld":""};
		},
		computed:{
            themeColor() {
              return this.$store.getters.themeColor
            },

		},
		watch:{},
		onLoad(options){
            let {keyworld}=options
if (keyworld !== undefined) this.keyworld = keyworld
		},
        onUnload() {

        },
		onReady(){

		},
		onShow(){

		},
		onHide(){

		},
		onResize(){

		},
		onPullDownRefresh(){

		},
		onReachBottom(e){

		},
		onPageScroll(e){

		},
		methods:{
                            //清除搜索框
                 clearnInputFunc(){
                        this.keyworld = '';
                }
		}
    };
</script>
<style lang="scss" scoped>
           .page{
            width: 100vw;
            overflow-x: hidden;
            min-height: calc(100vh - var(--window-bottom));
            background:rgba(248, 248, 248, 1);background-size: 100% auto;
        }
    .mapSearchresults_flex_0{
        background:#fff;width:750rpx;height:88rpx;overflow:hidden;z-index:10;top:0rpx;background-size:100% auto !important;
    }
    .mapSearchresults_fd0_0_c1_c2{
        width:32rpx;height:32rpx;border-radius:0rpx 0rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd0_0_c1_c1{
        font-size:28rpx;font-weight:400;color:#333;height:20rpx;
    }
    .mapSearchresults_fd0_0_c1_c0{
        font-size:30rpx;color:rgba(153, 153, 153, 1);margin:0rpx 8rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd0_0_c1{
        background:#F9F9F9;height:64rpx;border-radius:34rpx 34rpx 34rpx 34rpx;padding:0rpx 24rpx 0rpx 24rpx;
    }
    .mapSearchresults_fd0_0_c0_c0{
        font-size:36rpx;font-weight:500;color:#333;
    }
    .mapSearchresults_fd0_0_c0{
        margin:0rpx 50rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd0_0{
        padding:0rpx 26rpx 0rpx 35rpx;
    }
    .mapSearchresults_flex_1{
        background:rgba(255, 255, 255, 1);width:750rpx;height:170rpx;overflow:hidden;z-index:10;top:88rpx;background-size:100% auto;
    }
    .mapSearchresults_titleItemfd1_1_c3_c0{
        padding:12rpx 18rpx 12rpx 18rpx;line-height:28rpx;border-radius:28rpx;
    }
    .mapSearchresults_titlefd1_1_c3{
        border-radius:28rpx;margin:0rpx 24rpx 0rpx 0rpx;
    }
    .mapSearchresults_linefd1_1{
        background:rgba(255, 255, 255, 1);width:100rpx;height:8rpx;top:80rpx;background-size:100% auto !important;
    }
    .checkTitlefd1_1{
        font-weight:500 !important;font-size:24rpx !important;color:rgba(1, 129, 255, 1) !important;background-color:rgba(1, 129, 255, 0.1) !important;
    }
    ::v-deep .mapSearchresults_benbenTabsfd1_1{
        background:#fff;width:750rpx;height:104rpx;white-space:nowrap;text-align:center;padding:0rpx 0rpx 0rpx 32rpx;font-size:24rpx;font-weight:400;color:#333333;
    }
    .mapSearchresults_fd1_0_c0{
        color:#333333;font-size:32rpx;font-weight:500;line-height:42rpx;
    }
    .mapSearchresults_fd1_0{
        margin:0rpx 0rpx 0rpx 24rpx;
    }
    .mapSearchresults_flex_2{
        padding:24rpx 24rpx 0rpx 24rpx;
    }
    .mapSearchresults_fd2_1_c0_c1{
        background:rgba(250, 164, 58, 0.8);padding:6rpx 14rpx 6rpx 14rpx;border-radius:16rpx 0rpx 16rpx 0rpx;background-size:100% auto;color:#FFFFFF;font-size:24rpx;font-weight:500;line-height:24rpx;position:absolute;top:0rpx;left:0rpx;
    }
    .mapSearchresults_fd2_0_c1_c3_c1{
        color:#F7582F;font-size:36rpx;font-weight:700;line-height:36rpx;
    }
    .mapSearchresults_fd2_0_c1_c3_c0{
        color:#F7582F;font-size:24rpx;font-weight:700;line-height:32rpx;
    }
    .mapSearchresults_fd2_0_c1_c3{
        margin:13rpx 0rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd2_0_c1_c2_c1{
        color:#666666;font-size:24rpx;font-weight:400;line-height:32rpx;
    }
    .mapSearchresults_fd2_0_c1_c2_c0{
        width:24rpx;height:24rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 4rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd2_0_c1_c1_c0{
        background:rgba(243, 245, 250, 1);color:rgba(106, 124, 143, 1);font-size:22rpx;font-weight:400;line-height:32rpx;padding:0rpx 7rpx 0rpx 7rpx;background-size:100% auto !important;margin:0rpx 10rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd2_0_c1_c1{
        margin:8rpx 0rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd2_0_c1_c0_c0{
        color:#333333;font-size:32rpx;font-weight:500;line-height:42rpx;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;
    }
    .mapSearchresults_fd2_0_c0_c1{
        background:rgba(52, 122, 255, 0.8);padding:6rpx 14rpx 6rpx 14rpx;border-radius:16rpx 0rpx 16rpx 0rpx;background-size:100% auto;color:#FFFFFF;font-size:24rpx;font-weight:500;line-height:24rpx;position:absolute;top:0rpx;left:0rpx;
    }
    .mapSearchresults_fd2_0_c0_c0{
        width:226rpx;height:226rpx;border-radius:16rpx;
    }
    .mapSearchresults_fd2_0_c0{
        position:relative;margin:0rpx 24rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd2_0{
        background:rgba(255, 255, 255, 1);border-radius:16rpx;background-size:100% auto !important;margin:0rpx 0rpx 24rpx 0rpx;padding:24rpx;
    }
    .mapSearchresults_flex_3{
        padding:24rpx 24rpx 0rpx 24rpx;
    }
    .mapSearchresults_fd3_0_c1_c2_c1{
        margin:20rpx 0rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd3_0_c1_c2_c0_c1_c1{
        color:#F7582F;font-size:36rpx;font-weight:700;line-height:36rpx;
    }
    .mapSearchresults_fd3_0_c1_c2_c0_c1_c0{
        color:#F7582F;font-size:24rpx;font-weight:700;line-height:32rpx;
    }
    .mapSearchresults_fd3_0_c1_c2_c0_c0{
        color:#333333;font-size:28rpx;font-weight:500;line-height:32rpx;
    }
    .mapSearchresults_fd3_0_c1_c2{
        margin:27rpx 0rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd3_0_c1_c1_c1{
        color:#666666;font-size:24rpx;font-weight:400;line-height:32rpx;
    }
    .mapSearchresults_fd3_0_c1_c1_c0{
        width:24rpx;height:24rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 4rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd3_0_c1_c1{
        margin:8rpx 0rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd3_0_c1_c0_c1{
        color:#333333;font-size:32rpx;font-weight:500;line-height:42rpx;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;width:245rpx;
    }
    .mapSearchresults_fd3_0_c1_c0_c0{
        background:linear-gradient(134deg, #FF9402 0%, #FFCE00 100%);padding:6rpx 4rpx 6rpx 4rpx;background-size:100% auto;color:#FFFFFF;font-size:24rpx;font-weight:500;line-height:24rpx;border-radius:4rpx;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;width:106rpx;margin:0rpx 9rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd3_0_c0_c0{
        width:226rpx;height:226rpx;border-radius:16rpx;
    }
    .mapSearchresults_fd3_0_c0{
        position:relative;margin:0rpx 24rpx 0rpx 0rpx;
    }
    .mapSearchresults_fd3_0{
        background:rgba(255, 255, 255, 1);border-radius:16rpx;background-size:100% auto !important;margin:0rpx 0rpx 24rpx 0rpx;padding:24rpx;
    }
</style>
